<template>
  <div class="messageRecord">
    <!-- 推送列表 -->
    <div class="sendList">
      <div class="apply_table">
        <div class="apply_table_column">
          <div
            class="apply_table_title"
            v-for="(item, index) in tableColumn"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <el-divider></el-divider>
        <div v-if="tableData.length > 0">
          <div
            class="apply_table_info"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <div
              class="apply_info_box"
              @mouseover="showBtn(item)"
              @mouseout="hideBtn(item)"
            >
              <div class="apply_info_text">{{ item.id }}</div>
              <div class="apply_info_text">
                {{ item.intoTheTerminal.companyName }}
              </div>
              <div class="apply_info_text">
                {{ item.intoTheTerminal.linkman }}
              </div>
              <div class="apply_info_text">
                {{ item.intoTheTerminal.mobile }}
              </div>

              <div class="apply_info_text">{{ item.content }}</div>
              <div class="apply_info_text">
                {{ item.createdTime }}
              </div>
              <div class="apply_info_text">
                {{ item.intoTheTerminal.status == 1 ? "发送完成" : "发送中" }}
              </div>
              <!-- <div class="apply_info_btn">
                <button
                  class="btn_push"
                  v-show="item.show"
                >
                  查看详情
                </button>
              </div> -->
            </div>
            <el-divider></el-divider>
          </div>
        </div>
        <div class="test" v-else>暂无发送记录</div>
      </div>
    </div>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      v-if="tableData.length > 0"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "messageRecord",
  data() {
    return {
      tableColumn: [
        "ID",
        "公司名称",
        "负责人",
        "手机号码",
        "短信内容",
        "发送时间",
        "状态",
        // "操作",
      ],
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      userInfo: {},
      currentIndex: -1,
    };
  },
  created() {
    this.sendRocord();
    // this.sendRocordDetail();
  },
  methods: {
    showBtn(item) {
      item.show = true;
    },
    hideBtn(item) {
      item.show = false;
    },

    // 发送列表
    async sendRocord() {
      let info = JSON.parse(sessionStorage.getItem("userInfo"));
      this.userInfo = info;
      let params = {
        memberId: info.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      let res = await this.$apiFun.sendRocord(params);
      // console.log(res);
      this.tableData = res.result.rows.map((item) => {
        return { ...item, show: false };
      });
      this.total = Number(res.result.total);
    },

    // 页面切换
    handleCurrentChange(value) {
      this.pageNo = value;
      this.sendRocord();
    },

    // 跳转详情
    toDetail(index) {
      this.currentIndex = index;

      this.$emit("toDetailPage", {
        id: this.tableData[this.currentIndex].id,
      });
    },

    //
    // async sendRocordDetail() {
    //   let params = {};
    //   let res = await this.$apiFun.sendRocordDetail(params);
    //   console.log(res);
    // },
  },
};
</script>

<style lang="less" scoped>
.messageRecord {
  // 推送列表
  .sendList {
    .apply_table {
      margin-top: 0.5rem;
      .apply_table_column {
        display: flex;
        font-size: 0.16rem;
        font-weight: bold;
        color: #333333;
        text-align: center;
        justify-content: space-evenly;
        .apply_table_title {
          width: 1rem;
        }
        .apply_table_title:nth-child(2),
        .apply_table_title:nth-child(4) {
          width: 1.6rem;
        }

        .apply_table_title:nth-child(5) {
          width: 2.5rem;
          
        }
      }

      .apply_table_info {
        .apply_info_box {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: space-evenly;
          .apply_info_text {
            width: 9.45%;
            font-size: 0.16rem;
            font-weight: 400;
            color: #333333;
            line-height: 0.3rem;
            text-align: center;
          }
          .apply_info_text:nth-child(2),
          .apply_info_text:nth-child(4) {
            width: 1.6rem;
          }
          .apply_info_text:nth-child(5) {
            width: 2.5rem;
            text-align: justify;
            // text-align: left;
          }

          .apply_info_btn {
            width: 1.07rem;
            height: 0.3rem;
            display: flex;
            justify-content: space-evenly;

            .btn_push {
              background: none;
              border: none;
              font-size: 0.16rem;
              font-weight: bold;
              color: #f42551;
              line-height: 0.3rem;
              cursor: pointer;
            }
          }
        }
      }
      .test {
        font-size: 0.2rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 0.3rem;
        text-align: center;
      }
    }
  }

  // 分页样式
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f42551;
  }
}
</style>